<template>
  <div style="background-color: white" v-loading="isTrain">
    <uploader :options="options" class="uploader-example"style="margin-top: 20px" >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop >
        <div style="margin-bottom: 5px">
          <p >拖拽文件到灰色区域或者</p>
        </div>

        <uploader-btn>上传文件</uploader-btn>
        <uploader-btn :attrs="attrs">上传图片</uploader-btn>
        <uploader-btn :directory="true">上传文件夹</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
    <div class="train">
      <div class="train_info">
        <el-form ref="form" :model="form" label-width="80px" >
          <el-form-item label="分类名称">
            <el-input v-model="form.classLabel"></el-input>
          </el-form-item>
          <el-form-item label="学名">
            <el-input v-model="form.scientificName"></el-input>
          </el-form-item>
          <el-form-item label="特征">
            <el-input v-model="form.features" type="textarea" />
          </el-form-item>
          <el-form-item label="产地">
            <el-input v-model="form.originPlace" type="textarea" />
          </el-form-item>
          <el-form-item label="用途">
            <el-input v-model="form.purpose" type="textarea" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="handlerTrain">开始训练</el-button>
      </div>
      <div class="train_log">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="日志：">
            <el-input v-model="form.log" type="textarea" :autosize="{minRows:15,maxRows:15}"/>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
import {addClassification} from "../../api/classification";
import {train} from "../../api/train";

export default {
  data () {
    return {
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target: '//localhost:1234/train/uploadFolder',
        testChunks: false
      },
      attrs: {
        accept: 'image/*'
      },
      form:{
        classLabel:"",
        log:"",
        scientificName:"",
        features:"",
        originPlace:"",
        purpose:""

      },
      isTrain:false,
      ws:{}
    }
  },
  methods:{
    handlerTrain(){
      this.isTrain = true
      //对图片识别进行训练
      addClassification(this.form).then(result=>{
        //开始训练
        train().then(result=>{

        })
      })
      //创建websocket的连接
      this.ws = new WebSocket("ws://localhost:1234/ws/train");
      this.ws.onopen=()=>{
        console.log("连接/ws/train成功")

      }
      //接收后端发送的请求
      this.ws.onmessage = (data)=>{
        console.log("接收到服务端发送回来的消息"+data.data)
        this.form.log = data.data
        this.isTrain=false
      }
    }
  }

}
</script>

<style scoped>
.uploader-example {
  width: 93%;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.train{
  display: flex;
  align-items: center;
  width: 95%;
  margin: auto;
  margin-top: 30px;
  text-align: center;
  height: 460px;
}
.train_info{
  box-shadow: 1px 1px 10px #979a9e;
  width: 300px;
  padding: 30px;
  border-radius: 5px;
}
.train_log{
  width: 800px;
  margin-left: 80px;
  box-shadow: 1px 1px 10px #979a9e;
  padding: 15px;
  height: 350px;
}
</style>
